<template>
  <quill-editor v-model="aoao" :options="editorOption" />
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'RichText',
  components: {
    quillEditor
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types
    value: {
      typr: [Number, Object, Array, String],
      default: ''
    }
  },
  data() {
    return {
      aoao: this.value,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote'], // 引用  代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['code-block', 'image', 'link'] // 链接、图片、视频
          ] // 工具菜单栏配置
        },
        placeholder: '', // 提示
        readyOnly: false, // 是否只读
        theme: 'snow', // 主题 snow/bubble
        syntax: true // 语法检测
      }
    }
  },
  watch: {
    aoao: {
      handler(newValue) {
        this.$emit('input', newValue)
      },
      deep: true
    },
    value: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) this.aoao = newValue
      },
      deep: true
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .ql-editor {
  min-height: 150px;
  //margin-bottom: 100px;
}
</style>
